<!DOCTYPE html>
<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="_csrf" th:content="${_csrf.token}" />
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
<link rel="stylesheet"
	th:href="@{/static/bootstrap/css/bootstrap.min.css}" />
<link th:href="@{/static/css/blog.css}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
	  <script th:src="@{/static/js/html5shiv.min.js}"></script>
	  <script th:src="@{/static/js/respond.min.js}"></script>
	<![endif]-->
<title>动态</title>
<style>
.media-body img{
	display: block;
    max-width: 200px;
    height: auto;
}
.media-body video{
    max-width: 200px;
    height: auto;
}
</style>
</head>

<body>
	<fragment name="顶部导航" />
	<div class="container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2" id="pjax-news">
				<div id="news-list">
					<data name="newsPage" th:currentPage="${param.currentPage}"
						th:begin="${param.begin}" th:end="${param.end}"
						th:asc="${param.asc}" />
					<data name="myInfo" />
					<div class="alert alert-info"
						th:if="${#lists.isEmpty(newsPage.datas)}">没有任何动态</div>
					<div th:unless="${#lists.isEmpty(newsPage.datas)}">
						<div style="text-align: right">
							<input type="checkbox" id="asc"
								th:attr="checked=${newsPage.param.asc ? 'checked' : null}" />正序
						</div>
						<div class="media" th:each="news : ${newsPage.datas}"
							th:data-news="${news.id}">
							<div class="media-left">
								<a th:href="${urls.getUrl(news)}"> <img class="media-object"
									th:src="${gravatars.getOptionalUrl(myInfo.gravatar).orElse('/static/img/guest.png')}"
									style="width: 32px; height: 32px;">
								</a>
							</div>
							<div class="media-body">
								<h5 class="media-heading">
									<span th:text="${times.format(news.write,'yyyy-MM-dd HH:mm')}"></span>
									<a href="javascript:void(0)" th:data-cmt="${news.id}"
										style="margin-left: 5px"
										th:if="${news.allowComment || user != null}"><span
										class="glyphicon glyphicon-comment" aria-hidden="true"></span></a>
									<span class="glyphicon glyphicon-fire" aria-hidden="true"
										style="margin-left: 5px"></span>&nbsp;[[${news.hits}]]
								</h5>
								<p th:utext="${news.content}"></p>
								<p
									th:attr="style=${news.comments > 0 ? 'null' : 'display:none'}"
									class="text text-info" th:data-comment-info="${news.id}">
									<a href="javascript:void(0)"
										th:onclick="'render(\''+${news.id}+'\',\''+${news.allowComment}+'\')'"><small>共有<span
											class="num">[[${news.comments}]]</span>条评论
									</small></a>
								</p>
								<div th:data-comment-detail="${news.id}" style="display: none"></div>
							</div>
						</div>
					</div>
					<nav th:if="${newsPage.totalPage > 1}"
						th:with="newsUrlHelper=${urls.newsUrlHelper}">
						<ul class="pagination">
							<li><a
								th:href="${newsUrlHelper.getNewsUrl(newsPage.param,1)}"><span
									aria-hidden="true">&laquo;</span></a></li>
							<li
								th:each=" i : ${#numbers.sequence(newsPage.listbegin, newsPage.listend-1)}"
								th:class="${(i == newsPage.currentPage) ? 'active' : ''}"><a
								th:href="${newsUrlHelper.getNewsUrl(newsPage.param,i)}"
								th:text="${i}"></a></li>
							<li><a
								th:href="${newsUrlHelper.getNewsUrl(newsPage.param,newsPage.totalPage)}"><span
									aria-hidden="true">&raquo;</span></a></li>
						</ul>
					</nav>
				</div>
			</div>
		</div>
	</div>


	<fragment name="底部" />
	<div th:replace="base/foot_source">&nbsp;</div>
	<script th:inline="javascript">
        var config = {
            isLogin: [[${user != null}]],
            gravatarPrefix: [[${gravatars.getUrl('')}]]
        };
    </script>
	<script th:src="@{/static/plugin/comment/js/new_comment.js}">
    </script>
	<script th:src="@{/static/js/jquery.pjax.js}"></script>
	<script>
  	$(function(){
  		if ($.support.pjax) {
			$(document).pjax('#pjax-news ul a', '#pjax-news',{
				fragment : "#news-list"
			})
		}
    	$(document).on('click','[data-cmt]',function(){
    		  var moduleId = $(this).data('cmt');
          		cmt.doComment(moduleId,'news',function(){
                render(moduleId)
              });
    	});
      $(document).on("click","a[data-comment-clear]",function(){
        var moduleId = $(this).attr('data-comment-clear');
        $('[data-comment-detail=\''+moduleId+'\']').html('').hide();
        $(this).remove();
      }); 
      $("#asc").change(function(){
    	  window.location.href = basePath + '/news?asc='+$(this).is(":checked");
      });
    });
    var afterLoad = function(page){
      var moduleId = page.param.module.id;
      var c = $('[data-comment-detail=\''+moduleId+'\']');
      c.show();
      var ci = $('[data-comment-info=\''+moduleId+'\']');
      var total = page.totalRow;
      if(config.isLogin){
      	total -= page.checkCount;
      }
      ci.find('.num').html(total);
      if(total == 0){
      	ci.hide();
      }else{
        c.prepend('<hr>');
      	ci.show();
        if(ci.find('[data-comment-clear]').length == 0){
        	ci.append('<a href="javascript:void(0)" data-comment-clear="'+moduleId+'" style="margin-left:5px" data-comment-clear><small>收起</small></a>')
        }
      }
    }
   
    var render = function(moduleId,allowComment){
    	  var c = $('[data-comment-detail=\''+moduleId+'\']');
          cmt.renderComment({
            pageSize:5,
            page:1,
            moduleId:moduleId,
            moduleType:'news',
            asc:true,
            container:c,
            allowComment:allowComment == 'true',
            afterLoad:afterLoad
          });
    }
  </script>
</body>

</html>